<template>
  <div>
    请输入邮箱号<input type="text" v-model="emailNumber" />
    <br />
    请输入邮箱<input type="text" v-model="email" />
    <br />
    <span v-if="emailNumber && email"> 你的地址是：{{ emailAddress }} </span>
    姓名：<input type="text" v-model="user.name" ref="name" />
    <br />
    年龄：<input type="text" v-model="user.age" />
    <!-- 3、使用 -->
    <xm-button @click="btnClick" btname="这是一个按钮"></xm-button>
    <br />
    <xm-button @click="btnClick" btname="登录" :btFontSize="myfont"></xm-button>
    <br />
    <xm-button @click="btnClick" btname="注册" :btFontSize="myfont"></xm-button>
    <br />
    <xm-button @click="btnClick" btname="点赞"></xm-button>
    <br />
    <button @click="myfont = '40px'">变大</button>
    <br />
    <xm-video> 这个有8w点赞 </xm-video>
    <br />
    <xm-video> up </xm-video>
  </div>
</template>

<script>
// 1、导入
import XmButton from './XmButton.vue'
import XmVideo from './XmVideo.vue'
export default {
  name: 'HelloWorld',
  components: {
    // 2、注册
    XmButton,
    XmVideo,
  },
  data() {
    return {
      myfont: '20px',
      emailNumber: '',
      email: '',
      user: {
        name: '',
        age: '',
      },
    }
  },
  mounted() {
    //光标显示在name
    this.$refs.name.focus()
  },
  //computed 计算属性
  computed: {
    emailAddress() {
      return this.emailNumber + '@' + this.email + '.com'
    },
  },
  // watch 监听
  watch: {
    // 深度监视 age
    'user.age': {
      handler(newValue, oldValue) {
        console.log(newValue, oldValue)
      },
      //开启深度监视
      deep: true,
      once: true,
    },
    emailNumber(newValue, oldValue) {
      console.log('新值' + newValue, '老值' + oldValue)
      //超过7位数不让继续输入
      if (newValue.length > 7) {
        this.emailNumber = oldValue
      }
    },
  },
}
</script>

<style scoped>
.ball {
  width: 100px;
  height: 100px;
}
</style>
